<template>
  <div class="citySelectorContainer">
    <mu-tabs :value="activeTab" @change="handleTabChange">
      <mu-tab value="province" :title="selectedProvince.title"/>
      <mu-tab value="city" :title="selectedCity.title"/>
      <mu-tab value="area" :title="selectedArea.title"/>
    </mu-tabs>
    <div class="content">
      <ul class="flex wrap">
        <li v-for="(value, index) in cityData" @click="setCity(value)" :key="index">{{value.title}}</li>
      </ul>
    </div>
    <transition name="fade">
      <div class="toast" v-if="showToast">{{toastMessage}}</div>
    </transition>
  </div>
</template>

<script>
  import {cityList} from '../common/js/cityNew'
  import { commonAjaxJson, RESTFUL_API } from "@/api/api";
  export default {
    data () {
      return {
        cityList: cityList,
        activeTab: 'province',
        selectedProvince: {title: '选择省份'},
        selectedCity: {title:'选择城市'},
        selectedArea: {title:'选择区域'},
        cityInProvince: [],
        areaInCity: [],
        cityData: [],
        showToast: false,
        toastMessage: ''
      }
    },
    mounted () {
      this.queryCityLevel('province')
    },
    methods: {
      showToastFn (message) {
        this.showToast = true
        this.toastMessage = message
        let self = this
        setTimeout(function () {
          self.showToast = false
        }, 2000)
      },
      handleTabChange (val) {
        this.activeTab = val
        if (val == 'province') {
          this.queryCityLevel('province')
        } else if (val == 'city') {
          if (this.selectedProvince.title == '选择省份') {
            this.showToastFn('请选择省份')
            this.cityData = []
            return
          }
          this.queryCityLevel('city', this.selectedProvince.id)
        } else {
          if (this.selectedCity.title == '选择城市') {
            this.showToastFn('请选择城市')
            this.cityData = []
            return
          }
          this.queryCityLevel('city', this.selectedCity.id)
        }
      },
      queryCityLevel (level, id) {
        let pid = ''
        if (level == 'province') {
          pid = 1
        } else if (level == 'city') {
          pid = id
        } else {
          pid = id
        }
        commonAjaxJson(RESTFUL_API.getCity, {pid: pid}, true).then(res => {
          if (res.data.code == 200) {
            this.cityData = res.data.data
          } else {
            this.$store.commit('UPDATE_TOAST', {message: res.data.message})
          }
        })
      },
      setCity (val) {
        if (val.level == 1) { // 选择省份
          this.selectedProvince = val
          this.activeTab = 'city'
          this.selectedCity = {title: '选择城市'}
          this.selectedArea = {title: '选择区域'}
          this.queryCityLevel ('city', val.id)
        } else if (val.level == 2) {
          this.selectedCity = val
          this.activeTab = 'area'
          this.selectedArea = {title: '选择区域'}
          this.queryCityLevel ('area', val.id)
        } else {
          this.selectedArea = val
          this.$emit('setLocation', {
            province: this.selectedProvince,
            city: this.selectedCity,
            area: this.selectedArea
          })
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../common/css/flex.css";
  .toast{
    position: absolute;
    bottom: 40px;
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.7);
    color: white;
    left: 50%;
    transform: translateX(-50%);
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.7s
  }
  .fade-enter, .fade-leave-active {
    opacity: 0
  }
.citySelectorContainer{
  .content{
    background-color: white;
    min-height:400px;
    ul{
      padding:10px 0 0 10px;
      li{
        width:30%;
        padding:5px;
      }
    }
  }
}
</style>
